<template>
  <div class="container">
    <div class="avatar-box">
      <el-image
        class="avatar-image"
        :src="CommentMessage.userImage"
        fit="fill"
        :lazy="true"
      ></el-image>
    </div>
    <div>
      <div>
        <span>{{ CommentMessage.nickName }}</span>
        <span><i :class="PlatForm.className" aria-hidden="true" :style="PlatForm.color"></i></span>
        <span> {{ PlatForm.platform }}</span>
      </div>
      <p class="create-time">{{ CommentMessage.create_time }}</p>
      <div class="content">{{ CommentMessage.content }}</div>
    </div>
  </div>
</template>

<script>
import TitleBar from "@/components/common/TitleBar.vue";
export default {
  props: {
    CommentMessage: {
      require: true,
      type: Object,
    },
  },
  data() {
    return {
      platforms: [
        {
          className: "fa fa-chrome",
          color: "color:orange",
          platform: "Chrome",
        },
        {
          className: "fa fa-windows",
          color: "color:#43ceff",
          platform: "Windows",
        },
        {
          className: "fa fa-linux",
          color: "color:#ffdb69",
          platform: "Linux",
        },
        {
          className: "fa fa-android",
          color: "color:green",
          platform: "Android",
        },
        {
          className: "fa fa-apple",
          color: "color:gray",
          platform: "MacOs",
        },
      ],
    };
  },
  computed: {
    PlatForm() {
      for (let index = 0; index < this.platforms.length; index++) {
        const element = this.platforms[index];
        if (this.CommentMessage.platform == element.platform) {
          return element;
        }
      }
      return "";
    },
  },
  components: {
    TitleBar,
  },
};
</script>

<style scoped>
.container {
  display: flex;
  margin: 2rem 0px !important;
}
.avatar-image {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  margin-right: 1rem;
}
.create-time {
  margin-top: 0px;
  color: gray;
}
.fa {
  margin-right: 0.5rem;
  margin-left: 1rem;
}
</style>
